<template>
  <div v-cloak>
    <!-- 主要内容 -->
    <el-container
      :style="`box-shadow: inset 0px 0px 40px 0px ${
        themes['colors'][themes['idx']]
      }`"
    >
      <!-- 移动端导航栏 -->
      <el-drawer
        title="用户名"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleCloseDrawer"
        size="60%"
        custom-class="drawer-bg"
        :show-close="false"
        :with-header="false"
      >
        <ul class="xm-nav">
          <li class="xm-nav-item drawer-title" @click="gotoMine">
            <div class="avatar-icon">
              <img :src="userInfo.avatarURL || defaultIcon" alt="" />
            </div>
            <div class="user-info" :class="userInfo.isvip ? 'vip' : ''">
              {{ userInfo.username || "游客" }}
            </div>
          </li>
          <li class="xm-nav-item">
            <router-link active-class="active" to="/index">首页</router-link>
          </li>
          <li class="xm-nav-item">
            <router-link active-class="active" to="/cate">歌单</router-link>
          </li>
          <li class="xm-nav-item">
            <router-link active-class="active" to="/star">歌手</router-link>
          </li>
          <li class="xm-nav-item">
            <router-link active-class="active" to="/mine">我的</router-link>
          </li>
        </ul>
        <div class="lose-time" :class="userInfo.isvip ? 'vip' : ''">
          <img src="./assets/svg/vip.svg" alt="" />
          {{ userInfo.losetime | dateFmt }}
        </div>
      </el-drawer>

      <!-- PC端导航栏 -->
      <el-header>
        <router-link to="/" class="brand">
          <a class="brand-logo">
            <!-- <img src="./assets/brand.png" alt="" /> -->
            <img src="./assets/svg/logo.svg" alt="" />
          </a>
          <a class="brand-title">
            <span class="en">MissMusic</span>
            <span class="cn">遇见音乐</span>
          </a>
        </router-link>
        <ul class="nav">
          <li class="nav-item">
            <router-link active-class="active" to="/index" class="nav-link"
              >发现音乐</router-link
            >
          </li>
          <li class="nav-item">
            <router-link active-class="active" to="/cate" class="nav-link"
              >歌单</router-link
            >
          </li>
          <li class="nav-item">
            <router-link active-class="active" to="/star" class="nav-link"
              >歌手</router-link
            >
          </li>
          <li class="nav-item">
            <router-link active-class="active" to="/mine" class="nav-link"
              >我的</router-link
            >
          </li>
        </ul>
        <div class="search">
          <form class="search-form" @submit.prevent>
            <input
              v-model="keyword"
              type="text"
              @keyup.enter="searchHandler"
              placeholder="搜出好音乐..."
            />
            <label for=""><i class="el-icon-search"></i></label>
          </form>
        </div>
        <div class="xs-menu" @click="drawer = true">
          <!-- <i class="el-icon-menu"></i> -->
          <img
            src="./assets/svg/nav.svg"
            alt=""
            style="height: 25px; width: 25px"
          />
        </div>
      </el-header>

      <!-- 搜索框 -->
      <SearchInput></SearchInput>

      <!-- 内容 -->
      <el-main>
        <keep-alive
          :include="[
            'MusicCate',
            'MusicStar',
            'MusicHome',
            'MusicMine',
            'BackHome',
            'BackLogin',
          ]"
        >
          <router-view></router-view>
        </keep-alive>
      </el-main>

      <!-- 页脚 -->
      <el-footer>
        <router-link to="/back" class="music-copyright"
          >Copyright 2022 © 伍嘉华</router-link
        >
        <div class="music-tips">
          遇见音乐提醒您：本网站不会进行商用,图片素材来源网络,如有侵权请联系作者
          <span class="wx">(wx:hua030212)</span>删除
        </div>
      </el-footer>

      <!-- 返回顶部 -->
      <el-backtop :bottom="100" :right="right"></el-backtop>
    </el-container>

    <!-- 搜索结果 和 添加音乐-->
    <SearchResult
      :keyword="keyword"
      :visible="visible"
      :data="currentMusicListData"
      @close="closeHandler"
    ></SearchResult>

    <!-- 音乐弹出层 -->
    <MusicToast></MusicToast>

    <!-- 音乐播放器 -->
    <MusicPlayer></MusicPlayer>
  </div>
</template>

<script>
import axios from "axios";
import SearchInput from "@/components/public/SearchInput";
import SearchResult from "@/components/public/SearchResult";
import MusicToast from "./components/public/MusicToast.vue";
import musicData from "./data/music.data";
import { mapMutations, mapState, mapGetters, mapActions } from "vuex";
import MusicPlayer from "./components/public/MusicPlayer.vue";
export default {
  name: "App",
  /* 播放器 音乐弹出层 搜索框 搜索结果弹出层 */
  components: { MusicPlayer, MusicToast, SearchInput, SearchResult },
  data() {
    return {
      /* 抽屉的显示状态 */
      drawer: false,
      /* 抽屉打开方向 */
      direction: "rtl",
      /* 搜索关键字 */
      keyword: "",
      /* 当前弹出层的显示状态 */
      visible: false,
      /* 当前弹出层的数据 */
      currentMusicListData: [],
    };
  },
  filters: {
    /* 过滤器 */
    /* 格式化时间 */
    dateFmt(value) {
      if (!value) {
        return "未开通";
      }
      let now = new Date(value),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return (
        "到期时间：" +
        y +
        "-" +
        (m < 10 ? "0" + m : m) +
        "-" +
        (d < 10 ? "0" + d : d) +
        " " +
        now.toTimeString().substr(0, 8)
      );
    },
  },
  methods: {
    /* 加载监听视口宽度变化 以及 更新平台音乐的方法 */
    ...mapMutations("music", ["CHANGESCREENWIDTH", "UPDATEMUSICDATA"]),
    ...mapActions("music", ["searchRequest"]),

    /* 关闭抽屉 */
    handleCloseDrawer(done) {
      done();
    },
    /* 前往我的页面 */
    gotoMine() {
      this.$router.push({
        path: "/mine",
      });
    },
    /* 搜索 */
    searchHandler() {
      if (!this.keyword)
        return this.$message({ message: "请输入搜索关键字！", duration: 1000 });
      // this.searchRequest(this.keyword);
      this.visible = true;
    },
    /* 关闭搜索结果弹出层 */
    closeHandler(value) {
      this.visible = value;
      this.keyword = "";
      this.currentMusicListData = [];
    },
  },
  computed: {
    ...mapState("user", ["userInfo", "defaultIcon"]),
    ...mapState("music", ["themes"]),
    ...mapGetters("music", ["right"]),
  },
  mounted() {
    /* 当前视口宽度 */
    this.CHANGESCREENWIDTH(document.body.clientWidth);
    /* 监听视口宽度 */
    window.onresize = () => {
      return (() => {
        this.CHANGESCREENWIDTH(document.body.clientWidth);
      })();
    };
    /* 查看本地数据 如果有则读取本地的音乐 否则读取服务器的 */
    if (localStorage.getItem("MUSICDATA")) {
      this.UPDATEMUSICDATA(JSON.parse(localStorage.getItem("MUSICDATA")));
      console.log("读取本地音乐");
    } else {
      this.UPDATEMUSICDATA(musicData.musicList);
      console.log("读取线上音乐");
    }
    /* 全局事件总线 */
    this.$bus.$on("addmusic", (value, data) => {
      this.visible = value;
      data.isCustom = true;
      this.currentMusicListData = data;
    });
  },
  beforeDestroy() {
    /* 解绑 */
    this.$bus.$off("addmusic");
  },
};
</script>

<style lang="less" >
@mainColor: #ffcff1;
@headerBg: linear-gradient(to top, #2c5364, #203a43, #0f2027);
@fontcolordefault: #fffb;
@translation:all .3s;
@keyframes h_box_header {
  from {
    box-shadow: inset 0px 0px 40px 0 inherit;
  }
  to {
    box-shadow: inset 0px 0px 40px 0px transparent;
  }
}
@keyframes changeBg {
  0% {
    background: #000000;
    background: -webkit-linear-gradient(to bottom, #434343, #000000);
    background: linear-gradient(to bottom, #434343, #000000);
    background-repeat: no-repeat;
  }

  10% {
    background: #bdc3c7;
    background: -webkit-linear-gradient(to top, #2c3e50, #bdc3c7);
    background: linear-gradient(to top, #2c3e50, #bdc3c7);
    background-repeat: no-repeat;
  }

  20% {
    background: #4b79a1;
    background: -webkit-linear-gradient(to top, #283e51, #4b79a1);
    background: linear-gradient(to top, #283e51, #4b79a1);
    background-repeat: no-repeat;
  }

  30% {
    background: #304352;
    background: -webkit-linear-gradient(to top, #d7d2cc, #304352);
    background: linear-gradient(to top, #d7d2cc, #304352);
    background-repeat: no-repeat;
  }

  40% {
    background: #485563;
    background: -webkit-linear-gradient(to top, #29323c, #485563);
    background: linear-gradient(to top, #29323c, #485563);
    background-repeat: no-repeat;
  }

  50% {
    background: #606c88;
    background: -webkit-linear-gradient(to top, #3f4c6b, #606c88);
    background: linear-gradient(to top, #3f4c6b, #606c88);
    background-repeat: no-repeat;
  }

  60% {
    background: #e6dada;
    background: -webkit-linear-gradient(to top, #274046, #e6dada);
    background: linear-gradient(to top, #274046, #e6dada);
    background-repeat: no-repeat;
  }

  70% {
    background: #5d4157;
    background: -webkit-linear-gradient(to top, #a8caba, #5d4157);
    background: linear-gradient(to top, #a8caba, #5d4157);
    background-repeat: no-repeat;
  }

  80% {
    background: #616161;
    background: -webkit-linear-gradient(to top, #9bc5c3, #616161);
    background: linear-gradient(to top, #9bc5c3, #616161);
    background-repeat: no-repeat;
  }

  90% {
    background: #283048;
    background: -webkit-linear-gradient(to right, #859398, #283048);
    background: linear-gradient(to right, #859398, #283048);
    background-repeat: no-repeat;
  }

  100% {
    background: #232526;
    background: -webkit-linear-gradient(to bottom, #414345, #232526);
    background: linear-gradient(to bottom, #414345, #232526);
    background-repeat: no-repeat;
  }
}
@keyframes copyright {
  from {
    color: #dcdfe6;
  }

  to {
    color: #ffcff1;
  }
}

[v-cloak] {
  display: none;
}

/* 移动端导航栏 */
.drawer-bg {
  background: @headerBg;
}
.xm-nav {
  display: flex;
  flex-direction: column;
  .xm-nav-item {
    width: 100%;
    text-align: center;
    a {
      color: @fontcolordefault;
      width: 100%;
      display: block;
      padding: 0.3rem 0;
      &.active {
        color: @mainColor;
      }
    }
    &.drawer-title {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0.5rem 0;
      .avatar-icon {
        width: 1rem;
        height: 1rem;
        overflow: hidden;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .user-info {
        margin-top: 0.2rem;
      }
    }
  }
}
.lose-time {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 0.3rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  padding: 0 3.5rem;
  animation: changeBg 100s alternate infinite ease-in-out;
  .el-container {
    padding: 00.1rem;
    transition: @translation;
    animation: h_box_header 1s linear infinite alternate;
    box-shadow: inset 0px 0px 40px 0px transparent;

    .el-header {
      height: 1.5rem !important;
      position: relative;
      display: flex;
      background: @headerBg;
      color: @fontcolordefault;
      .xs-menu {
        cursor: pointer;
      }
      .brand {
        height: 100%;
        display: flex;
        .brand-logo {
          padding: 0.2rem;
          padding-left: 0rem;
        }
        .brand-title,
        .brand-logo,
        img {
          height: 100%;
          display: block;
        }
        .brand-title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-left: 0.3rem;
          .en,
          .cn {
            display: block;
            font-size: 0.3rem;
            color: @mainColor;
          }
          .cn {
            font-size: 0.2rem;
          }
        }
      }
      .nav {
        margin-left: 1rem;
        white-space: nowrap;
        overflow: hidden;
        .nav-item {
          display: inline-block;
          height: 100%;
          .nav-link {
            height: 100%;
            padding: 0 0.5rem;
            display: flex;
            align-items: center;
            font-size: 0.3rem;
            transition: @translation;
            &:hover {
              color: @mainColor;
            }
            &.active {
              color: @mainColor;
            }
          }
        }
      }
      .search {
        position: absolute;
        right: 0;
        margin-right: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        float: right;
        .search-form {
          position: relative;
          display: flex;
          label {
            position: absolute;
            top: 3px;
          }
          input {
            outline: none;
            background-color: transparent;
            border: none;
            border-bottom: 1px solid @mainColor;
            padding: 0.05rem 0;
            padding-left: 0.3rem;
            color: @mainColor;
            &:focus + label {
              color: @mainColor;
            }
          }
        }
      }
      .xs-menu {
        color: @mainColor;
        font-size: 0.6rem;
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
    .el-main {
      padding: 0;
    }
    .el-footer {
      background: linear-gradient(to bottom, #2c5364, #203a43, #0f2027);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      font-size: 0.01rem;
      .music-copyright {
        animation: copyright 3s infinite alternate;
        transition: @translation;
      }
      .wx {
        color: @mainColor;
      }
    }
  }
}
/* 屏幕小于768px时 */
@media screen and (max-width: 768px) {
  .music-tips {
    display: none;
  }
  body {
    padding: 0 !important;
    .el-container {
      padding-bottom: 1.45rem;
      .el-header {
        justify-content: space-between;
        .xs-menu {
          display: flex;
        }
        .search,
        .nav {
          display: none;
        }
      }
    }
  }
}
/* ≥768px 屏幕 ≥992px*/
@media screen and (min-width: 768px) and (max-width: 992px) {
  body {
    padding: 0 !important;
    .el-container {
      .el-header {
        justify-content: space-between;
        .xs-menu {
          display: flex;
        }
        .search,
        .nav {
          display: none;
        }
      }
    }
  }
}
/* ≥992px 屏幕 ≥1220px*/
@media screen and (min-width: 992px) and (max-width: 1220px) {
  body {
    padding: 0 1rem !important;
    .el-container {
      .el-header {
        .xs-menu {
          display: none;
        }
      }
    }
  }
}
/* ≥1220px 屏幕 ≥1500px*/
@media screen and (min-width: 1220px) and (max-width: 1500px) {
  body {
    padding: 0 2.5rem !important;
    .el-container {
      .el-header {
        .xs-menu {
          display: none;
        }
      }
    }
  }
}
@media screen and (min-width: 1500px) {
  body {
    padding: 0 3.5rem !important;
    .el-container {
      max-width: 1172px;
      .el-header {
        .xs-menu {
          display: none;
        }
      }
    }
  }
}
</style>